<template>
  <div id="app">
      <MyHeader title="GoodsList商品列表"></MyHeader>
      <MyTable
      :list="list"
      >
      <template #header>
        <tr>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </tr>
      </template>
      <template #body="scope">
        <tr v-for="item in scope.row"
        :key="item.id"
        >
        <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>{{ item.goods_price }}</td>
        <td>
            <input type="text" v-if="item.inputVisible" 
            class="form-control"
            v-focus
            @blur="item.inputVisible=false"
            @keydown.enter="enterFn(item)"
            v-model="iptVal"
            >

            <button v-else class="btn btn-info btn-sm"
            @click="item.inputVisible=true"
            style="display:block"
            >+Tag</button>
            <span
            v-for="(item,index) in item.tags"
            :key="index"
            class="tagsSpan badge"
            >
            {{ item }}
            </span>
        </td>
        <td><button 
        class="btn btn-danger"
        @click="removelist(item.id)"
        >删除</button></td>
      </tr>
      </template>
      </MyTable>
  </div>
</template>

<script>
import  "./assets/fonts/iconfont.css"
import  "bootstrap/dist/css/bootstrap.css"

import MyHeader from './components/MyHeader.vue'
import MyTable from './components/MyTable.vue'
export default {
  name: 'App',
  components: {
  MyHeader,
  MyTable
  },
  data(){
      return {
          list:[],
          iptVal:''
      }
  },
 async created(){
    //   初始化完成 请求ajax数据
   let {data:{data}} = await this.$https({url:'/api/goods'})
   this.list=data;
  },
  methods:{
      removelist(id){
          let index = this.list.findIndex(e=>e.id==id)
          this.list.splice(index,1)
      },
      enterFn(item){
          item.inputVisible=false
          item.tags.push(this.iptVal)
          this.iptVal=''
      }
  }
}
</script>

<style lang="less">
#app{
    padding-top: 45px;
input{
    width: 50px;
    height: 30px;
    display: block;
}
.tagsSpan{
    padding: 5px 10px;
    background-color: #ffc107;
    border-radius: 5px;
    margin-right: 5px;
}
}
</style>
